let pageData = data_hmdyh
let now_page = 1
let page_num = 10
let max_page
let del_num
let change_num

/* 得到数据，按一个结构渲染页面，data要一个数据数组 */
function showTable(data) {
    $('#hmdyh_table tbody').html('')
    for (let i = 0; i < data.length; i++) {
        $('#hmdyh_table tbody').append(
            `<tr>
                <td><input type="checkbox" name="box_s" id="" value="${i}" onclick="del_color()"></td>
                <td>${data[i].jykh}</td>
                <td>${data[i].jyr}</td>
                <td>${data[i].sfzhm}</td>
                <td>${data[i].sjhm}</td>
                <td>${data[i].xb}</td>
                <td>${data[i].jycs1}</td>
                <td>${data[i].jycs2}</td>
                <td>${data[i].zxjyrq}</td>
                <td>${data[i].fdcs}</td>
                <td>${data[i].fkje}</td>
                <td>${data[i].cqhscs}</td>
                <td>
                    <span type="button" data-toggle="modal" data-target="#hmdyh_del" onclick='del_hmdyh(${i})'>删除</span>
                    <span> | </span>  
                    <span type="button" data-toggle="modal" data-target="#hmdyh_change" onclick='change_hmdyh(${i})'>修改</span>
                </td>    
            </tr>`
        )
    }
}

/* 输入数据，动态渲染出表格，这里要的num是页数，data是数据数组 */
function page_turn(num, data) {
    let page_one = (num - 1) * page_num //获得截取数组的起始下标
    let page_data = data.slice(page_one, page_one + page_num) //被截取后的数据数组，就是渲染一页要的数据
    now_page = num //当前页 重新赋值
    pageStyle(num) // 当前页的按钮样式
    showTable(page_data) //执行渲染页面，渲染我们截取的数据数组
    check_all_false()
}

/* 动态渲染，页面跳转，给按钮样式 */
function pageStyle(num) {
    $('.page_style').removeClass("T_page")
    $('.page_style').eq(num).addClass("T_page")
}

/* 渲染分页按钮函数 */
function showPage(data) {
    $('#hmdyh_page').html('')
    max_page = Math.ceil(data.length / page_num)
    for (let i = 1; i <= max_page; i++) {
        $('#hmdyh_page').append(`<div class='page_style'>${i}</div>`)
    }
    if (max_page > 1) {
        $('#hmdyh_page div:first-of-type').before(`<div class='page_style' onclick='page_pre()'> < </div>`)

        $('#hmdyh_page div:last-of-type').after(
            `<div class='page_style' onclick='page_next()'> > </div>`
        )
    }
    $('#hmdyh_page div:last-of-type').after(
        `<div id='pageNum' class="dropup">
            <div class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown">
                <span>${page_num}条/页</span>
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                <li class='menuPage' value="10">10条/页</li>
                <li class='menuPage' value="20">20条/页</li>
                <li class='menuPage' value="50">50条/页</li>
            </ul>
        </div>`
    )
} //先循环生成按钮，在判断有多少页，如果大于1页，那就在前面生成‘上一页’，在最后生成‘下一页’。如果只有1页，就直接生成切换分页的div

/* show集合了分页渲染函数、渲染分页按钮函数、分页按钮样式函数，的函数，形参是页数 */
function show(num) {
    page_turn(num, pageData)
    showPage(pageData)
    pageStyle(num)
    check_all_false()
}

/* 集合部分函数方法，同一执行 */
function page_pre() {
    if (now_page > 1) {
        now_page--
        show(now_page)
        return
    }
    show(now_page)
}

/* 上一页 */
function page_next() {
    if (now_page < max_page) {
        now_page++
        show(now_page)
        return
    }
    show(now_page)
}

/* 下一页 */
function del_hmdyh(num) {
    del_num = num + (now_page - 1) * page_num
    $('#del_h').html('<h4><span class="glyphicon glyphicon-exclamation-sign"></span>是否确定删除卡号为' + pageData[num].jykh + '的该条数据？</h4>')
    $('#del_f').html(`<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="T_del_hmdyh()">确认</button>`)
}

/* 点击单项删除按钮，修改模态框特定内容，并寻找对应数据 */
function T_del_hmdyh() {
    pageData.splice(del_num, 1)
    show(now_page)
}

/* 删除对应数据，并重新渲染 */
function add_hmdyh() {
    let jyr = document.getElementById('hmdyh_add_1')
    let jykh = document.getElementById('hmdyh_add_2')
    let cqts = document.getElementById('hmdyh_add_3')
    let fkje = document.getElementById('hmdyh_add_4')
    let dsts = document.getElementById('hmdyh_add_5')
    let cqhscs = document.getElementById('hmdyh_add_6')
    let jycs2 = document.getElementById('hmdyh_add_7')
    jyr.value = ''
    jykh.value = ''
    cqts.value = ''
    fkje.value = ''
    dsts.value = ''
    cqhscs.value = ''
    jycs2.value = ''
}

/* 点击添加按钮，将模态框内容清空 */
function T_add_hmdyh() {
    let jyr = document.getElementById('hmdyh_add_1').value
    let jykh = document.getElementById('hmdyh_add_2').value
    let cqts = document.getElementById('hmdyh_add_3').value
    let fkje = document.getElementById('hmdyh_add_4').value
    let dsts = document.getElementById('hmdyh_add_5').value
    let cqhscs = document.getElementById('hmdyh_add_6').value
    let jycs2 = document.getElementById('hmdyh_add_7').value
    let sfzhm = '无'
    let sjhm = '无'
    let zxjyrq = '无'
    let fdcs = '无'
    let xb = '无'
    let jycs1 = '无'
    let new_data = { jykh, jyr, sfzhm, sjhm, xb, jycs1, jycs2, zxjyrq, fdcs, fkje, cqhscs }
    pageData.splice(0, 0, new_data)
    show(now_page)
}

/* 读取输入数据，并创建新数据组合，添加入总数据中，并重新渲染 */
function change_hmdyh(num) {
    change_num = num + (now_page - 1) * page_num
    let change_obj = pageData[change_num]
    let jyr = document.getElementById('hmdyh_change_1')
    let jykh = document.getElementById('hmdyh_change_2')
    let cqts = document.getElementById('hmdyh_change_3')
    let fkje = document.getElementById('hmdyh_change_4')
    let dsts = document.getElementById('hmdyh_change_5')
    let cqhscs = document.getElementById('hmdyh_change_6')
    let jycs2 = document.getElementById('hmdyh_change_7')
    jyr.value = change_obj.jyr
    jykh.value = change_obj.jykh
        // zxjyrq.value = change_obj.zxjyrq
    cqts.value = '无'
    fkje.value = change_obj.fkje
        // fdcs.value = change_obj.fdcs
    dsts.value = '无'
    cqhscs.value = change_obj.cqhscs
    jycs2.value = change_obj.jycs2
}

/* 点击修改按钮，寻找对应数据，并读取数据内容添加入模态框对应框内 */
function T_change_hmdyh() {
    let jyr = document.getElementById('hmdyh_change_1').value
    let jykh = document.getElementById('hmdyh_change_2').value
    let cqts = document.getElementById('hmdyh_change_3').value
    let fkje = document.getElementById('hmdyh_change_4').value
    let dsts = document.getElementById('hmdyh_change_5').value
    let cqhscs = document.getElementById('hmdyh_change_6').value
    let jycs2 = document.getElementById('hmdyh_change_7').value
    let sfzhm = pageData[change_num].sfzhm
    let sjhm = pageData[change_num].sjhm
    let xb = pageData[change_num].xb
    let jycs1 = pageData[change_num].jycs1
    let new_data = { jykh, jyr, sfzhm, sjhm, xb, jycs1, jycs2, zxjyrq, fdcs, fkje, cqhscs }
    pageData.splice(change_num, 1, new_data)
    show(now_page)
}

/* 读取输入数据，创建新数据组合，替换总数据中对应数据内容，并重新渲染 */
function dels_hmdyh() {
    $('#del_h').html('<h4><span class="glyphicon glyphicon-exclamation-sign"></span>是否确定删除选中全部数据？</h4>')
    $('#del_f').html(`<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="T_dels_hmdyh()">确认</button>`)
}

/* 点击选中删除按钮，修改模态框特定内容 */
function T_dels_hmdyh() {
    let dels_arr = new Array();
    //循环所有选中的值
    $('input[name="box_s"]:checked').each(function() {
        //追加到数组中
        dels_arr.push($(this).val());
    });
    for (let i = dels_arr.length - 1; i >= 0; i--) {
        pageData.splice(dels_arr[i], 1)
    }
    show(now_page)
}

/* 寻找所有name=box_s且:checked=true的多选框，并删除对应数据 */
function check_all_false() {
    $('input[name="check_all"]').prop("checked", false)
}

/* 将name=check_all的多选框修改为false未选中状态 */
function del_color() {
    if ($('input[name="box_s"]').is(':checked')) {
        $('#del_all').css({ 'background': 'rgb(83, 168, 255)', 'color': 'white' })
    } else(
        $('#del_all').css({ 'background': 'rgb(251, 251, 251)', 'color': 'rgb(209, 209, 209)' })
    )
}

/* 判断name=check_all的多选框选中状态，修改id=del_all的div样式 */
function del_color_2() {
    if ($('input[name="box_s"]').is(':checked')) {
        $('#del_all').css({ 'background': 'rgb(251, 251, 251)', 'color': 'rgb(209, 209, 209)' })
    } else(
        $('#del_all').css({ 'background': 'rgb(83, 168, 255)', 'color': 'white' })
    )
}